import * as React from 'react';
import { Button, Text, View , StyleSheet, Image} from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import HomeScreen from './component/pages/HomeScreen';
import DetailsScreen from './component/pages/DetailsScreen'
import BookScreen from './component/pages/BookScreen';

const HomeStack = createStackNavigator();

let Styles = StyleSheet.create({
    icon : {
        width : 20,
        height : 20
    }
});

function IndexIcon(props) {
    if (props.focused) {
        return (
            <Image source={require('./component/asserts/home1.png')} style={Styles.icon}></Image>
        )
    } else {
        return (
            <Image source={require('./component/asserts/home.png')} style={Styles.icon}></Image>
        )
    }
}

function BookIcon(props) {
    if (props.focused) {
        return (
            <Image source={require('./component/asserts/book1.png')} style={Styles.icon}></Image>
        )
    } else {
        return (
            <Image source={require('./component/asserts/book.png')} style={Styles.icon}></Image>
        )
    }
}


function HomeStackScreen() {
  return (
    <HomeStack.Navigator>
      <HomeStack.Screen name="Home" component={HomeScreen}  options={{ title: '主页' }}/>
      <HomeStack.Screen name="Details" component={DetailsScreen} options={{ title: '小说章节' }} />
      {/* <HomeStack.Screen name="Book" component={BookScreen} options={{ title: '小说' }} /> */}
    </HomeStack.Navigator>
  );
}


const Tab = createBottomTabNavigator();

export default function App() {
  return (
    <NavigationContainer>
        <Tab.Navigator>
            
            <Tab.Screen name="Home" component={HomeStackScreen} options={{
                title : "主页",
                tabBarIcon: ({ focused,color, size }) => (
                    <IndexIcon style={{ width: size, height: size }} focused={focused} />
                )
            }}/>
            <Tab.Screen name="Book" component={BookScreen} options={{
                title : "阅读",
                tabBarIcon: ({ focused,color, size }) => (
                    <BookIcon style={{ width: size, height: size }} focused={focused} />
                )
            }}/>
        </Tab.Navigator>
    </NavigationContainer>
  );
}